<template>
    <view style="width:100%;height:100%;">
        <div class="header">
            <ul>
                <li><span><icon :icon="['fas', 'network-wired']" /></span></li>
                <li>首次激活使用流程</li>
            </ul>
        </div>
        <div class="main">
            <div class="select">
                选择工作模式
            </div>
            <div id="node" v-bind:class="'box' + show1" @click="change1">
                <form-image class="sign" :src="'images/GreenNode.png'" v-show="show1==1"></form-image>
                <form-image class="sign" :src="'images/WhiteNode.png'" v-show="show1==2"></form-image>
                <span v-if="show1==1">
                    <form-image :src="'images/circle.png'" ></form-image>
                </span>
                <span v-if="show1==2">
                    <form-image :src="'images/correct.png'" ></form-image>
                </span>
                <div class="name" style="font-size: 20px;margin-top: 15px;">节点网关模式</div>
            </div>
            <div id="center"  v-bind:class="'box' + show2" @click="change2">
                <form-image class="sign" :src="'images/GreenCenter.png'" v-show="show2==1" ></form-image>
                <form-image class="sign" :src="'images/WhiteCenter.png'" v-show="show2==2" ></form-image>
                <span v-if="show2==1">
                    <form-image :src="'images/circle.png'" ></form-image>
                </span>
                <span v-if="show2==2">
                    <form-image :src="'images/correct.png'" ></form-image>
                </span>
                <div class="name" style="font-size: 20px;margin-top: 15px;">中心网关模式</div>
            </div>
        </div>
    </view>
</template>
<script>
import FormImage from "@/components/form/FormImage.vue";
import { getCurrentInstance, ref } from "vue"
export default {
//   name: "test",
    components: { 
        FormImage
    },
  data() {
    return {
      show1: 1,
      show2: 1,
    };
  },
  methods: {
    change1: function() {
      this.show1=2
      this.show2=1
      this.setWorkMode(1)
    },
    change2: function() {
      this.show1=1
      this.show2=2
      this.setWorkMode(0)
    },
    setWorkMode(mode) {
        this.$default_hloading.istips = false
        this.$http.get('updateWorkMode',{params: {workMode:mode}}).then((res)=>{
            if(res.data.code=="RP_OK") {
                this.userInfo.STATUS = 2
                this.userInfo.NETWORKMODE = mode
                this.$ElMessage.success({message:"选择节点成功",  duration: 1000})
            }else{
                this.$ElMessage.error({message:`${res.data.msg}`,  duration: 1000})
            }
        }).catch((err)=>{
            console.error(err)
            this.$ElMessage.error({message:"错误",  duration: 1000})
        })
    }
  },
    setup() {
        var {proxy : cthis} = getCurrentInstance()
        return {
            userInfo: ref(cthis.$userInfo)
        }
    }
}

</script>
<style>
/* 基本模式 */
li {
    list-style: none
}
/* 头部模块 */
.header{
    height: 80px;
    /* background-color: red */
    padding-left: 76px;
    padding-top: 48px;
}

.header li{
    float: left;
    margin-right: 28px;
    /* background-color: aliceblue; */
    height: 32px;
    font-size: 32px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #333333;
    line-height: 32px;
}

.header li span{
    font-size: 32px;
    font-family: 'icomoon';
}

/* 中心模块 */
.main{
    position: relative;
    width: 100%;
    height: 918px;
    /* background-color:cornflowerblue; */
}

.main .select{
    position: absolute;
    width: 180px;
    height: 30px;
    left: 50%;
    top: 155px;
    margin-left: -90px;
    text-align: center;
    line-height: 30px;
    font-size: 30px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #343434;
    background-color: #fff;
}
/* 节点网关模块 */

.main .sign{
    float: left;
    margin-top: 28px;
    margin-left: 107px;
    width: 79px;
    height: 80px;
}
.box1{
    position: absolute;
    top:237px;
    left: 50%;
    width: 292px;
    height: 260px;
    background: #FFFFFF;
    box-shadow: 0px 4px 8px 0px rgba(204, 204, 204, 0.54);
    border-radius: 28px;
}
.box1 span{
    float: left;
    /* width: 50px;
    height: 50px; */
    margin-top: 31px;
    margin-left: 121px;
    /* border: 2px solid #BFBFBF; */
    border-radius: 50%;
    /* background-color: #fff; */
}
.box2{
    position: absolute;
    top:237px;
    left: 50%;
    width: 292px;
    height: 260px;
    background: #2D9386;
    box-shadow: 0px 4px 8px 0px rgba(204, 204, 204, 0.54);
    border-radius: 28px;
}
.box2 span{
    float: left;
    /* width: 50px;
    height: 50px; */
    margin-top: 31px;
    margin-left: 121px;
    /* border: 2px solid #BFBFBF; */
    border-radius: 50%;
    /* background-color: #fff; */
}
#node{
    margin-left: -327px;
}
#center{
    margin-left: 35px;
}
.box1 .name{
    float: left;
    width: 100%;
    margin-top: 22px;
    text-align: center;
}
.box2 .name{
    float: left;
    width: 100%;
    margin-top: 22px;
    text-align: center;
    color: #fff;
}


</style>